<template>
  <div class="product-list">
    <div class="select-all">
      <label class="checkbox-wrapper">
        <input
          type="checkbox"
          :checked="allSelected"
          @change="toggleSelectAll"
        >
        <span>全选</span>
      </label>
      <span class="total-items">共 {{ totalItems }} 件商品</span>
    </div>

    <div class="products">
      <ProductItem
        v-for="product in products"
        :key="product.id"
        :product="product"
        @update="handleUpdate"
        @remove="handleRemove"
        @toggle-select="handleToggleSelect"
        @toggle-favorite="handleToggleFavorite"
      />
    </div>

    <div v-if="products.length === 0" class="empty-state">
      购物车是空的，快去选购商品吧！
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed, defineEmits, ref, watch } from 'vue'
import ProductItem from './ProductItem.vue'

const props = defineProps({
  products: {
    type: Array,
    required: true,
    default: () => []
  }
})

const emit = defineEmits(['toggle-select-all', 'update', 'remove', 'toggle-select', 'toggle-favorite'])

const localProducts = ref([...props.products])

watch(
  () => props.products,
  (newVal) => {
    localProducts.value = [...newVal]
  },
  { deep: true }
)

const allSelected = computed(() => {
  return localProducts.value.length > 0 && localProducts.value.every(p => p.selected)
})

const totalItems = computed(() => {
  return localProducts.value.reduce((sum, p) => sum + p.quantity, 0)
})

function handleUpdate (updateInfo) {
  const index = localProducts.value.findIndex(product => product.itemId === updateInfo.id)
  if (index !== -1) {
    localProducts.value[index].quantity = updateInfo.quantity
  }
  emit('update', updateInfo.id, updateInfo.quantity)
}

function handleRemove (id) {
  localProducts.value = localProducts.value.filter(product => product.itemId !== id)
  emit('remove', id)
}

function handleToggleSelect (toggleInfo) {
  const index = localProducts.value.findIndex(product => product.itemId === toggleInfo.id)
  if (index !== -1) {
    localProducts.value[index].selected = toggleInfo.selected
  }
  emit('toggle-select', toggleInfo.id)
}

function handleToggleFavorite (id) {
  const index = localProducts.value.findIndex(product => product.itemId === id)
  if (index !== -1) {
    localProducts.value[index].favorite = !localProducts.value[index].favorite
  }
  emit('toggle-favorite', id)
}

function toggleSelectAll () {
  const newState = !allSelected.value
  localProducts.value.forEach(product => {
    product.selected = newState
  })
  emit('toggle-select-all', newState)
}
</script>

<style scoped>
/* 样式保持不变 */
.product-list {
  flex: 1;
  padding: 1.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.select-all {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.total-items {
  margin-left: auto;
  color: #666;
  font-size: 0.9rem;
}

.products {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: #999;
  font-size: 1.1rem;
}
</style>
